<template>
    <div>
      <div class="main-tab">
        <x-header id="header" slot="header" :left-options="{showBack: false}" >
          <x-icon type="ios-arrow-back" slot="left" style="fill:#fff;" @click="back"></x-icon>
          <span slot="default" class="header-tit">我的消息</span>
        </x-header>
        <div class="main-headerAndTab">
          <tab bar-active-color="#AD2532" :line-width="2" custom-bar-width="1.43rem" active-color="#AD2532" default-color="#9B9B9B">
            <tab-item selected  active-class="active-1" @click.native="handle1">消息</tab-item>
            <tab-item active-class="active-1" @click.native="handle2">赞</tab-item>
          </tab>
          <div>
            <group class="group" v-show="flag1">
              <cell class="cell" :title="item.title" is-link v-for=" (item, index) in msgList" :key="index" :link="item.path" >
                <img slot="icon"  class="cell-icon" :src="item.icon"/>
              </cell>
            </group>
            <group v-show="flag2">
              <cell-box class="zan-msg" v-for="(item,index) in zanList" :key="item.id">
                <img :src="item.avatar">
                <div class="info">
                  <span class="name">{{item.nickname}}</span>
                  <span class="ago">{{computedResidualTime(item)}}<span class="zan">赞了你</span></span>
                </div>
              </cell-box>
            </group>
            <div class="more" v-show="flag2">没有更多了哦～</div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import { getCollectMessage,getCommentMessage} from '@/api/user';

  export default {
        name: "myMessage",
      data(){
          return{
            cid:1,
            flag1:true,
            flag2:false,
            msgList:[
              {
                title:'文章消息',
                icon: require('../../../static/icon/my-message/wenzhang.png'),
                path:'article_message'
              },
              {
                title:'论坛消息',
                icon: require('../../../static/icon/my-message/luntan.png'),
                path:''
              },
              {
                title:'问答消息',
                icon: require('../../../static/icon/my-message/wenda.png'),
                path:''
              },
              {
                title:'产品点评消息',
                icon: require('../../../static/icon/my-message/chanpindianping.png'),
                path:''
              },
              {
                title:'平台消息',
                icon: require('../../../static/icon/my-message/pingtai.png'),
                path:'platform_message'
              },
            ],
            zanList:[
            ]
          }
      },
      methods:{
        handle1(){
          this.flag1=true;
          this.flag2=false;
        },
        handle2(){
          this.flag2=true;
          this.flag1=false;
        },
        back(){
          this.$router.go(-1)
        },
        getCollectMessage(){
          getCollectMessage(parseInt(this.cid)).then(res =>{
            console.log(res)
            this.zanList=res.data;
          })
        },
        computedResidualTime(item){
          let date = new Date();
          let createdate=new Date(Date.parse(item.createTime))
          let currentTime= parseInt(date.getTime()/1000)
          let createTime= parseInt(createdate.getTime()/1000)
          let previousTime=currentTime-createTime;

          let day =parseInt(previousTime/(24*3600));//天数
          let hour=parseInt(previousTime/3600)//小时
          let minute=parseInt(previousTime/60)//分钟
          let second=parseInt(previousTime)//秒数
          if (hour>24){
            return day+"天之前"
          }
          if (hour>0&&hour<24){
            return  hour+"个小时之前"
          }
          if (minute>0&&minute<60){
            return  minute+"分钟之前"
          }
          if (minute<0){
            return  second+"秒之前"
          }
        },
        getCommentMessage(){
          getCommentMessage(parseInt(this.cid)).then(res =>{})
          console.log(res)
        }
      },
      created(){
          this.getCollectMessage();
          this.getCommentMessage();
      }
    }
</script>

<style scoped>
  .header-tit{
    margin-top: 0.2rem;
  }
  #header{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .group{
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: 0;
  }
  .group img{
    width: 2.07rem;
    height: 2.07rem;
    margin-right: 0.93rem;
  }
  .zan-msg{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
  .zan-msg img{
    width: 3.57rem;
    height: 3.57rem;
    background: #FFFFFF;
    border: 1px solid #F4F4F4;
    border-radius:50%; overflow:hidden;
  }
  .info{
    display: flex;
    flex-direction: column;
    margin-left: 1.07rem;
  }
  .name{
    font-family: "PingFangSC-Semibold",serif;
    font-size: 17px;
    color: #030303;
    letter-spacing: -0.41px;
  }
  .ago{
    margin-top: 0.37rem;
    font-family: "PingFangSC-Semibold",serif;
    font-size: 14px;
    color: #9B9B9B;
    letter-spacing: -0.34px;
  }
  .zan{
    font-family: "PingFangSC-Semibold",serif;
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: -0.34px;
    text-align: justify;
    margin-left: 0.36rem;
  }
  .more{
    position: absolute;
    left: 50%;
    margin-left: -3.43rem;
    margin-top: 1.07rem;
    font-size: 14px;
    color: #9B9B9B;
    letter-spacing: -0.34px;
    text-align: justify;
  }
</style>
